<template>
	<div class="dashboard-container">
		<!-- 主体内容区域 -->
		<div class="content-container">
			<!-- 左侧：车辆统计和饼图 -->

			<div class="bgfff bra8 displayFlex mr10" style="flex: 1;align-items: stretch;padding-top: 23px;">
				<div class="left-panel">
					<div class="color555 textCenter font15">厂外运输车辆</div>
					<div class="car-count">
						<div class="count-number">{{data1.total}}</div>
						<div class="count-title">车次</div>
					</div>
					<div class="pie-chart" id="chart1"></div>
					<div class="" style="justify-content: center;display: flex;flex-wrap: wrap;padding-bottom: 49px;">
						<div class="legend-item" v-for="(item,index) in data1.list" :key="index"
							style="width: 50%;justify-content: center;margin-top: 20px;">
							<div class="legend-color" :style="{'background':item.background}" style="margin-top: 5px;"></div>
							<div>
								<div class="color888 font13">{{item.name}}</div>
								<div>
									<span class="color333">{{item.num}}</span>
									<span class="color888">次</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 中间：产品运输统计 -->
				<div class="middle-panel">
					<div class="displayFlex mb10">
						<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd"
							value-format="yyyy-MM-dd" type="date" size="small" class="w130px" @change="countGoods()">
						</el-date-picker>
						<img src="@/assets/sIcon83.png" style="width: 20px;height: 5px;" class="ml10 mr10" />
						<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd"
							value-format="yyyy-MM-dd" type="date" size="small" class="ml10 w130px" @change="countGoods()">
						</el-date-picker>
					</div>

					<div
						style="height: 525px;overflow-y: auto;background: linear-gradient(0deg, #FFFFFF, #F7F8FC);border-radius: 4px;padding: 51px 21px;margin-right: 20px;">
						<div v-for="(item, index) in data2" :key="index"
							:style="{'marginBottom':index == (data2.length-1)?'':'78px'}">
							<div class="displayFlexBet font14 mb20">
								<div>
									<span style="color: #1C3451;" class="mr10">{{item.goodsTypeStr}}</span>
									<span class="color555">{{ item.num }}次</span>
								</div>

								<div class="color555">{{ item.qty }}吨</div>
							</div>
							<div class="progress-container">
								<div class="progress-bar">
									<div class="progress-segment green" :style="{width: item.stdList[0].num/item.num*100+'%'}">
									</div>
									<div class="progress-segment" style="background: #9DFF86;"
										:style="{width: item.stdList[1].num/item.num*100+'%'}"></div>
									<div class="progress-segment blue" :style="{width: item.stdList[2].num/item.num*100+'%'}">
									</div>
									<div class="progress-segment yellow" :style="{width: item.stdList[3].num/item.num*100+'%'}">
									</div>
								</div>
							</div>
							<div class="color555 font14">
								<span>新能源及国六占比{{ item.percent }}%</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 右侧：月度柱状图和折线图 -->
			<div style="flex: 1;background: #fff;border-radius: 8px;padding: 23px 20px;">
				<div class="displayFlexBet mb10">
					<div class="displayFlex">
						<div class="mr20">清洁运输趋势</div>
						<el-date-picker v-model="params.year" placeholder="开始时间" format="yyyy" value-format="yyyy" type="year"
							size="small" class="w130px" @change="countDoorMonthChart()">
						</el-date-picker>
					</div>
					<div class="color555 font14">新能源及国六占比{{data3.yearNewEnergyPercent}}%</div>
				</div>
				<div class="bar-line-chart" ref="barLineChart"
					style="background: linear-gradient(0deg, #FFFFFF, #F7F8FC);border-radius: 4px;height: 478px;"></div>
			</div>
		</div>


		<div style="width: 100%;line-height: 56px;background: #FFFFFF;padding-left: 37px;" class="color333 font15 bra8">
			今日进出厂运输台账
		</div>

		<div style="margin-top: 10px;">
			<div class="displayFlexBet bgfff bra8 font15 color555" style="padding: 10px 20px 10px 37px;">
				<div style="width: 40px;">编号</div>
				<div style="width: 200px;">时间</div>
				<div style="width: 150px;">进场/出场</div>
				<div style="width: 250px;">车牌</div>
				<div style="width: 150px;">排放标准</div>
				<div style="width: 150px;">运输货物</div>
				<div style="width: 150px;">运输量</div>
			</div>
			<div class="bgfff bra8 font15 color555 mt10" style="padding: 10px 20px 10px 37px;">
				<el-empty v-if="tableData.list.length == 0" style="margin: 0 auto;" />
				<div v-for="(item,index) in tableData.list" :key="index" class="displayFlexBet color555 point"
					style="border-bottom: 1px solid#F8F7F9;padding-bottom: 20px;padding-top: 20px;"
					@click="$router.push('/cleanTransportation/detail?id='+item.id)">
					<div style="width: 40px;">{{index+1}}.</div>
					<div style="width: 200px;">{{item.transportTime}}</div>
					<div style="width: 150px;">{{item.transportTypeStr}}</div>
					<div style="width: 250px;">{{item.vehicleNo}}</div>
					<div style="width: 150px;">{{item.emissionStandardStr}}</div>
					<div style="width: 150px;">{{item.goodsName || '--'}}</div>
					<div style="width: 150px;">{{(item.goodsQty || '--')+'吨'}}</div>
				</div>
			</div>

			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					ticketId: '',
					startTime: moment().startOf('month').format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					year: moment().format('YYYY'),
					vehicleNo: '',
					emissionStandard: '',
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				data1: {
					list: []
				},
				data2: [],
				data3: []
			}
		},
		mounted() {
			that = this
			that.params.ticketId = that.$store.state.token

			this.$nextTick(() => {
				//this.initPieChart()
				//this.initBarLineChart()
				this.countDoorEmissionStandardV2()
				this.countGoods()
				this.countDoorMonthChart()
				that.getTableData()
				// 监听窗口大小变化，重新渲染图表

			})
		},

		methods: {
			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},

			getTableData() {
				let thisParams = {
					startTime: moment().format('YYYY-MM-DD') + " 00:00:00",
					endTime: moment().format('YYYY-MM-DD') + " 23:59:59",
				}
				let apiName = "cleanTransportation/pageCleanTransportation"
				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},

			countDoorMonthChart() {
				that.ajax({
					url: 'cleanTransportation/countDoorMonthChart',
					contentType: 'application/json',
					data: JSON.stringify({
						year: that.params.year
					}),
					success: function(data) {
						that.data3 = data.data
						that.initBarLineChart()
					},
				})
			},

			countGoods() {
				that.ajax({
					url: 'cleanTransportation/countGoods',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(data) {
						that.data2 = data.data
					},
				})
			},

			countDoorEmissionStandardV2() {
				that.ajax({
					url: 'cleanTransportation/countDoorEmissionStandardV2',
					contentType: 'application/json',
					data: JSON.stringify({
						carCategory: "OUTSIDE_CAR"
					}),
					success: function(data) {
						that.data1 = data.data

						let seriersData = []
						for (let index in data.data.list) {
							let item = data.data.list[index]
							if (index == 0) item.background = '#04E38A'
							if (index == 1) item.background = '#9DFF86'
							if (index == 2) item.background = '#7C8DFF'
							if (index == 3) item.background = '#FFE689'
							let _item = {
								value: item.num,
								name: item.name
							}
							seriersData.push(_item)
						}
						that.formChart("chart1", seriersData, "厂外运输车辆", that.data1.percent)
					},
				})
			},

			// 初始化饼图
			formChart(chartId, seriesData, title = "入场", percent) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				let _title = "新能源及国六"

				const option = {
					color: ['#49E49F', '#B2FC7C', '#8898FF', '#FFE58F'],
					series: [{
						name: '车辆类型占比',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: true, // show属性很关键 show为true时 初始化时即会展示默认文本；show为false时，只有在鼠标悬浮在块上时 才会展示相应文本
							position: 'center', // 文本展示位置
							formatter: () => { // 格式化要展示的文本
								return `{key|${percent}%}\n{length|${_title}}` // totalCount为自定义需要展示的属性 默认文本
							},
							rich: {
								//文本样式
								key: {
									fontSize: 22,
									fontFamily: "微软雅黑",
									color: '#454c5c',
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
								length: {
									fontFamily: "微软雅黑",
									fontSize: 14,
									color: '#6c7a89',
									lineHeight: 30,
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
							}
						},
						labelLine: {
							show: false
						},
						data: seriesData
					}]
				}

				myChart.setOption(option)
			},

			// 初始化柱状图和折线图
			initBarLineChart() {
				let barLine = echarts.init(this.$refs.barLineChart)
				let data1 = []
				let data2 = []
				let data3 = []
				let data4 = []
				let data5 = []
				let data6 = []
				let data7 = []
				for (let index in this.data3.dataList) {
					let item = this.data3.dataList[index]
					if (item.stdList && item.stdList.length) {
						for (let item2 of item.stdList) {
							if (item2.code == 'ELECTRIC') data1.push(item2.num)
							else if (item2.code == 'NATIONAL_STANDARD_6') data2.push(item2.num)
							else if (item2.code == 'NATIONAL_STANDARD_5') data3.push(item2.num)
							else data4.push(item2.num)
						}
					} else {
						data1.push(0)
						data2.push(0)
						data3.push(0)
						data4.push(0)
					}
					data5.push(item.newEnergyPercent)
					data6.push(item.stdSixPercent)
					data7.push(item.stdFiveBelowPercent)
				}

				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						},
						formatter: function(params) {
							let res = params[0].name + '<br/>';
							params.forEach(function(item) {
								if (item.seriesName.includes("占比")) res += item.seriesName + ' : ' + item.value +
									'%<br/>'; // 添加系列名和数据值
								else res += item.seriesName + ' : ' + item.value + '<br/>'; // 添加系列名和数据值
							});
							return res
						}
					},
					grid: {
						left: '8%',
						right: '8%',
						bottom: '5%',
						top: '5%',
						containLabel: false
					},
					xAxis: [{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
						axisPointer: {
							type: 'shadow'
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					}],
					yAxis: [{
							type: 'value',
							name: '',
							splitLine: {
								show: true,
								lineStyle: {
									color: ["#FAFBFC"],
								},
							},
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							axisLabel: {
								formatter: '{value}',
								//y轴文字的配置
								textStyle: {
									color: "rgba(215, 215, 215, 1)",
								},
							},
							axisLine: {
								lineStyle: {
									opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
								}
							},
						},
						{
							type: 'value',
							name: '',
							min: 0,
							max: 100,
							splitLine: {
								show: true,
								lineStyle: {
									color: ["#FAFBFC"],
								},
							},
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							axisLabel: {
								formatter: '{value}%',
								//y轴文字的配置
								textStyle: {
									color: "rgba(215, 215, 215, 1)",
								},
							},
							axisLine: {
								lineStyle: {
									opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
								}
							},
						}
					],
					series: [{
							name: '新能源',
							type: 'bar',
							stack: 'total',
							emphasis: {
								focus: 'series'
							},
							barWidth: 20,
							data: data1,
							color: '#49E49F'
						},
						{
							name: '国六',
							type: 'bar',
							stack: 'total',
							emphasis: {
								focus: 'series'
							},
							data: data2,
							color: '#B2FC7C'
						},
						{
							name: '国五',
							type: 'bar',
							stack: 'total',
							emphasis: {
								focus: 'series'
							},
							data: data3,
							color: '#8898FF'
						},
						{
							name: '其他',
							type: 'bar',
							stack: 'total',
							emphasis: {
								focus: 'series'
							},
							data: data4,
							color: '#FFE689'
						},
						{
							name: '新能源占比',
							type: 'line',
							yAxisIndex: 1,
							symbol: 'circle',
							symbolSize: 8,
							data: data5,
							color: '#17C67F'
						},
						{
							name: '国六占比',
							type: 'line',
							yAxisIndex: 1,
							symbol: 'circle',
							symbolSize: 8,
							data: data6,
							color: '#75E335'
						},
						{
							name: '国五以下占比',
							type: 'line',
							yAxisIndex: 1,
							symbol: 'circle',
							symbolSize: 8,
							data: data7,
							color: '#7C8DFF'
						}
					]
				}

				barLine.setOption(option)
			},


		}
	}
</script>

<style scoped>
	.dashboard-container {
		width: 100%;
		box-sizing: border-box;
		background-color: #f5f7fa;
	}

	.filter-container {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		background-color: #fff;
		padding: 15px;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.filter-item {
		margin-right: 20px;
	}

	.year-select {
		display: flex;
		align-items: center;
	}

	.year-select span {
		margin-right: 10px;
	}

	.content-container {
		display: flex;
		margin-bottom: 20px;
	}

	.left-panel {
		width: 50%;
		position: relative;
	}

	.car-count {
		text-align: center;
		margin-bottom: 10px;
	}

	.count-number {
		font-size: 36px;
		font-weight: bold;
		color: #555;
		margin-top: 40px;
	}

	.count-title {
		font-size: 14px;
		color: #555;
	}

	.pie-chart {
		height: 250px;
		width: 100%;
	}

	.legend-container {
		margin-top: 10px;
	}

	.legend-item {
		display: flex;
		margin-bottom: 5px;
	}

	.legend-color {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.middle-panel {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.transport-stats-item {
		margin-bottom: 15px;
	}

	.stats-header,
	.stats-footer {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.progress-container {
		width: 100%;
		margin: 10px 0;
	}

	.progress-bar {
		height: 20px;
		width: 100%;
		display: flex;
		border-radius: 5px;
		overflow: hidden;
	}

	.progress-segment {
		height: 100%;
	}

	.green {
		background-color: #49E49F;
	}

	.blue {
		background-color: #8898FF;
	}

	.yellow {
		background-color: #FFE58F;
	}

	.right-panel {
		flex: 1;
	}

	.bar-line-chart {
		height: 400px;
		width: 100%;
	}

	.table-container {
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 15px;
	}

	.table-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
	}
</style>